﻿@model Roulette.Models.TableModel
@{
    ViewBag.Title = "Roulette";
}

@section Head
{
    <script type="text/javascript" src="/Scripts/Custom/roulette.js"></script>
    <script type="text/javascript" src="/Scripts/json2.js"></script>
    <script type="text/javascript" src="/Scripts/jquery.signalR-0.5.0.min.js"></script>
    <script type="text/javascript" src="/signalr/hubs"></script>
    <script type="text/javascript">
        var rouletteStarted = false;

        function main() {
            setTimeout(function () {
                if (rouletteStarted && currentState == 0) {
                    rouletteStarted = false;
                    $("#board .highlighted").removeClass("highlighted");
                    $("#ball").css({ top: 0, left: 0, display: 'none' });
                    $.ajax({
                        type: "POST",
                        url: '/Home/GetHistory',
                        success: function (history) {
                            $(".right .selected-number").fadeOut(1000, function () {
                                $(this).remove();
                                $("#history").animate({ "margin-top": 80 }, 500, function () {
                                    $("#history").html(history);
                                    getRoundNumber();
                                });
                            });

                        }
                    });
                }
                if (!rouletteStarted && currentState == 1) {
                    rouletteStarted = true;
                    Start();
                }
                main();
            }, 1000);
        }

        function drawStakes(stakes) {
            if (stakes != "") {
                if($("#board").html() != stakes)
                        $("#board").html(stakes);
            }
            else {
                $('.roulette-board div.chip').remove();
                $('#zero div.chip').remove();
            }
        }

        //////
        var questions = $.connection.questionsHub;
        questions.newQuestion = function (data) {
            drawStakes(data);
        };

        $(function () {
            $.connection.hub.start();
            getRoundNumber();
            setProgressBar();
            main();


            function doSomething() {
                var winW = 1600
                if (document.body && document.body.offsetWidth) {
                    winW = document.body.offsetWidth;
                }
                if (document.compatMode == 'CSS1Compat' &&
                    document.documentElement &&
                    document.documentElement.offsetWidth) {
                    winW = document.documentElement.offsetWidth;
                }
                if (window.innerWidth && window.innerHeight) {
                    winW = window.innerWidth;
                }

                if (winW > 1860) {
                    $("#roulette").addClass("big-wheel");
                    $("#board-section-container").addClass("big-board");
                } else {
                    $("#roulette").removeClass("big-wheel");
                    $("#board-section-container").removeClass("big-board");
                }
            };

            var resizeTimer;
            $(window).resize(function () {
                clearTimeout(resizeTimer);
                resizeTimer = setTimeout(doSomething, 100);
            });

            doSomething();
        });

    </script>
}

<div id="user-board">

<div id="main-table">
<canvas id="roulette" width="438" height="438"></canvas>

<div id="board-section-container">
    <div id="board">
        @Html.Partial("_Board",Model)
    </div>
    <div class="clear"></div>
    <div id="sectors" style="margin-top: 40px;">
        @Html.Partial("_Sectors", false)
    </div>
</div>

</div>
</div>



<div class="right">
<div id="history">
@Html.Partial("_History",Model)
</div>

</div>
